<template>
  <div class="banner">
    <Swiper>
      <Slide v-for="(item , index) in banners" :key="index">
        <img :src="item.Img1">
      </Slide>
    </Swiper>
    <div class="center" v-for="(item,index) in lists" :key="index" >
      <div class="title">
        <span>{{item.title}}</span>
        <span>查看更多▶</span>
      </div>
      <div class="item" @click="gotoBuy(item.title1)">
        <img :src="item.img1">
        <span>{{item.title1}}</span>
        <span>57篇</span>
      </div>
      <div class="item" @click="gotoBuy(item.title2)">
        <img :src="item.img2">
        <span>{{item.title2}}</span>
        <span>55篇</span>
      </div>
      <div class="item" @click="gotoBuy(item.title3)">
        <img :src="item.img3">
        <span>{{item.title3}}</span>
        <span>55篇</span>
      </div>
      <div class="item" @click="gotoBuy(item.title4)">
        <img :src="item.img4">
        <span>{{item.title4}}</span>
        <span>55篇</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, Slide } from 'vue-swiper-component';
import axios from 'axios'




  export default {
    // index() {
    //   return 0
    // },
    name:'banner',
    data(){
      return{
        banners:{},
        lists:{},
        picture:'',
      }
    },
    components: {
      Swiper,
      Slide
    },
    methods:{
      getBanner(){
        axios.get('http://localhost:9999/banner').then((data)=>{
          this.banners=data.data.data
        });
        axios.get('http://localhost:9999/list').then((data)=>{
          this.lists=data.data.data
        })
      },
      gotoBuy(name){
        this.$router.push({
          path:'/buy',
          name:'buy',
          params:{
            Name:name
          }
        })
      }
    },
    created() {
      this.getBanner();
    }
  }
</script>

<style scoped>
swipe {
  width: 100%;
}
.banner{
  /*position: fixed;*/
  position: absolute;
  top: 61px;
  right: 1px;
  height: 200px;
  width: 100%;
  border-radius: 10px;
  background-color: #a03434;


}

img {
  height: 200px;
  width: 100%;
  border-radius: 10px;
}
.banner .wh_content .wh_indicator{
  height: 0;
  width: 0;
}
.banner .center{
  margin-top: 10px;
  border-top: 1px solid #d6d6d6;
  border-bottom: 1px solid #d6d6d6;
}
.banner .center .item{
  display: inline-block;
  margin-left: 10px;
  width: 47%;
}
.banner .center .item img{
  height: 100px;
}
.banner .center .item span{
  display: block;
}
.banner .center .item span:nth-child(2){
  font-size: 15px;
  color: black;
}
.banner .center .item span:nth-child(3){
  font-size: 10px;
  color: #686767;
}
.banner .center .title span:nth-child(1){
  font-size: 20px;
  color: black;
  font-weight: bold;
  margin-left: 10px;
}
.banner .center .title span:nth-child(2){
  position: absolute;
  font-size: 10px;
  color: #6f6f6f;
  right: 5px;
  margin-top: 5px;
}
.banner .center .item{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
